
import React, { Component } from 'react';
import {
  createBottomTabNavigator,
  createStackNavigator
} from 'react-navigation';
import {
  View,
  Text,
  Image,
} from 'react-native';
import HomePage from '../home/HomePage';
import NextPage from '../homeDetail/NextPage';
import FavorPage from '../favorite/FavorPage';
import CatePage from '../favorite/CatePage';
import WebPage from '../favorite/WebPage';
import MoviePage from '../favorite/MoviePage';
import MinePage from '../mine/MinePage';
import TestPage from '../TestControl/TestPage';
import routeIndex from './IndexRoute';

const home_normal = require('../images/home_normal.png');
const home_selected = require('../images/home_selected.png');
const favorite_normal = require('../images/favorite_normal.png');
const favorite_selected = require('../images/favorite_selected.png');
const mine_normal = require('../images/mine_normal.png');
const mine_selected = require('../images/mine_selected.png');

const TabRouteConfigs = {
  HomePage:{
    screen:HomePage,
    navigationOptions:({ navigation }) => ({
        headerTitle:'首页',
        gesturesEnabled: false,
        tabBarLabel:'首页',
        tabBarIcon:({focused,tintColor}) => (
          <Image
            source={focused ? home_normal:home_selected}
            style={{width:23,height:23,tintColor:tintColor}}
          />)
        }),
      },
  FavorPage:{
    screen:CatePage,
    navigationOptions: ({ navigation }) => ({
        headerTitle:'视频',
        gesturesEnabled: false,
        tabBarLabel:'视频',
        tabBarIcon:({focused,tintColor}) => (
          <Image
            source={focused ? favorite_normal:favorite_selected}
            style={{width:23,height:23,tintColor:tintColor}}
          />)
        }),
      },
  MoviePage:{
    screen:MoviePage,
    navigationOptions: ({ navigation }) => ({
        headerTitle:'电影',
        headerRight:<Text style={{width:60,height:44,color:'red',backgroundColor:'yellow',textAlign:'center',marginRight:10}}>左边按钮</Text>,
        header:null,
        gesturesEnabled: false,
        tabBarLabel:'电影',
        tabBarIcon:({focused,tintColor}) => (
          <Image
            source={focused ? favorite_normal:favorite_selected}
            style={{width:23,height:23,tintColor:tintColor}}
          />)
        }),
      },
  MinePage:{
    screen:MinePage,
    navigationOptions: ({ navigation }) => ({
        headerTitle:'个人中心',
        headerRight:<Text style={{width:60,height:44,color:'red',backgroundColor:'yellow',textAlign:'center',marginRight:10}}>左边按钮</Text>,
        header:null,
        gesturesEnabled: false,
        tabBarLabel:'个人中心',

        tabBarIcon:({focused,tintColor}) => (
          <Image
            source={focused ? mine_normal:mine_selected}
            style={{width:23,height:23,tintColor:tintColor}}
          />)
        }),
      },
    TestPage:{
      screen:TestPage,
      navigationOptions: ({ navigation }) => ({
          headerTitle:'测试',
          headerRight:<Text style={{width:60,height:44,color:'red',backgroundColor:'yellow',textAlign:'center',marginRight:10}}>左边按钮</Text>,
          header:null,
          gesturesEnabled: false,
          tabBarLabel:'测试',
          tabBarIcon:({focused,tintColor}) => (
            <Image
              source={focused ? mine_normal:mine_selected}
              style={{width:23,height:23,tintColor:tintColor}}
            />)
          }),
        },

};

const TabNavigatorConfigs = {
    // initialRouteName:'HomePage',
    //是否在更改标签时显示动画
    animationEnabled: false,
    tabBarPosition: 'bottom',
    //是否允许在标签之间进行滑动
    swipeEnabled: false,
    backBehavior: "none",

};
const APP = createBottomTabNavigator(TabRouteConfigs,TabNavigatorConfigs);
const Navigator = createStackNavigator(
    {
          aPP: {screen:APP},
          ...routeIndex,
    },
    {
　　　　//设置导航栏公用的样式
        navigationOptions:({ navigation }) => ({

                headerStyle:{
                  backgroundColor:'#F0F0F0',
                },
                title:'百思不得姐',
                //设置导航栏文字样式 titleStyle
                headerTitleStyle:{
                    flex:1,
                    textAlign:'center',
                　　 fontWeight:'normal',
                　　 fontSize:18,
                　　 color:'black',
                },
                mode:'modal',
                headerMode:'float',
                headerTintColor:'black',
                headerBackTitle:'返回',
                //返回箭头重写
                // headerLeft:() => {
                //     return <Icon name="chevron-left" onPress={()=>navigation.goBack()}  style={styles.icon}/>;
                // }
        })
    },
);

export default Navigator;
